<template>
  <div class="dactorHealth">
    <div class="header">
      <van-nav-bar :fixed="true" :border="false">
        <template #left>
          <van-search
            v-model="value"
            placeholder="请输入你想要搜索的内容"
            background="transparent"
            shape="round"
            left-icon="https://z3.ax1x.com/2021/07/16/WMXpwT.png"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="commom">
      <ul>
        <router-link
          tag="li"
          v-for="(item, index) in threeIndex"
          :key="index"
          :class="{ active: active === item.skip }"
          :to="item.skip"
        >
          <p>{{ item.title }}</p>
        </router-link>
      </ul>
      <!-- <van-tabs
        v-model="active"
        :router="true"
        color="#0685F5"
        title-active-color="#0685F5"
      >
        <van-tab
          v-for="(item, index) in threeIndex"
          :key="index"
          :to="item.skip"
        >
          <template #title>{{ item.title }} </template>
        </van-tab>
      </van-tabs> -->
    </div>
    <router-view />
  </div>
</template>
<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const active = ref("");
    const router = useRouter();
    const threeIndex = [
      {
        title: "医生说",
        skip: "/home/healthheader/doctor",
      },
      {
        title: "推荐",
        skip: "/home/healthheader/recommend",
      },
      {
        title: "直播",
        skip: "/home/healthheader/live",
      },
      {
        title: "名医课",
        skip: "/home/healthheader/curriculum",
      },
    ];
    const gotoRouter = (i) => {
      active.value = i;
      router.push(i);
    };

    return {
      active,
      threeIndex,
      gotoRouter,
    };
  },
};
</script>
<style lang="less" scoped>
.dactorHealth {
  :deep(.header) {
    margin-bottom: 104px;
    background: #fff;
    .van-nav-bar {
      padding: 5px 0;
    }
    .van-nav-bar__left {
      width: 100%;
      padding: 0;
      .van-search {
        width: 100%;
      }
      .van-field__left-icon {
        width: 22px;
        height: 22px;
        padding: 2px 0;
        .van-icon__image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  :deep(.commom) {
    width: 100%;
    position: fixed;
    top: 52px;
    left: 0;
    z-index: 6;
    background: #fff;
    ul {
      display: flex;
      padding: 0 10px;
      justify-content: space-between;
      border-bottom: 1px solid #cfcfcf;
      p {
        width: 90px;
        height: 50px;
        line-height: 50px;
        font-size: 17px;
        font-weight: 900;
        color: #333333;
        text-align: center;
      }
      .router-link-active {
        position: relative;
        p {
          font-size: 18px;
          color: #0685f5;
        }
        // text-align: center;
        &::after {
          content: "";
          position: absolute;
          width: 40px;
          height: 4px;
          background: #0685f5;
          bottom: 0;
          transform: translateX(60%);
        }
      }
    }
  }
}
</style>
